<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 23:54:40
-->
<template>
  <div ref="right2_container" style="height: 95%">
    
  </div>
</template>

<script>
import { Gauge } from '@antv/g2plot';

const ticks = [0, 1 / 3, 2 / 3, 1];
const color = ['#F4664A', '#FAAD14', '#30BF78'];

export default {
  data() {
    return {
      dataArr:[

      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
        const gauge = new Gauge(this.$refs.right2_container, {
          percent: 0,
          range: {
            ticks: [0, 1],
            color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
          },
          indicator: {
            pointer: {
              style: {
                stroke: '#D0D0D0',
              },
            },
            pin: {
              style: {
                stroke: '#D0D0D0',
              },
            },
          },
          statistic: {
            title: {
              formatter: ({ percent }) => {
                if (percent < ticks[1]) {
                  return '短';
                }
                if (percent < ticks[2]) {
                  return '中等';
                }
                return '长';
              },
              style: ({ percent }) => {
                return {
                  fontSize: '36px',
                  lineHeight: 1,
                  color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
                };
              },
            },
            content: {
              offsetY: 36,
              style: {
                fontSize: '20px',
                color: '#fff',
              },
              formatter: () => '可用时长',
            },
          },
        });

        gauge.render();
        let data = 0.7;
        const interval = setInterval(() => {
          if (data >= 1.5) {
            clearInterval(interval);
          }
          data += 0.005;
          gauge.changeData(data > 1 ? data - 1 : data);
        }, 100);
    }
  },
}
</script>